<template>
  <div>
    <el-form
      ref="vulnForm"
      :rules="vulnFormRules"
      :model="editForm"
      label-width="100px"
      @submit.native.prevent
    >
      <el-row>
        <el-col :span="10">
          <el-form-item label="漏洞名称:" prop="name">
            <el-input
              v-model="editForm.name"
              placeholder="漏洞名称"
              clearable
            />
          </el-form-item>
          <el-form-item label="漏洞类型:" prop="type">
            <el-select
              v-model="editForm.type"
              placeholder="请选择漏洞类型"
              style="width: 100%"
            >
              <el-option
                v-for="(item, key) in typeList"
                :key="'type' + key"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="漏洞等级:" prop="level">
            <el-select
              v-model="editForm.level"
              placeholder="请选择漏洞等级"
              style="width: 100%"
            >
              <el-option
                v-for="(item, key) in levelList"
                :key="'type' + key"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="绑定资产:" prop="asset_get">
            <el-select
              v-model="editForm.asset_get"
              placeholder="请选择绑定资产"
              style="width: 100%"
              multiple
              filterable
              remote
              reserve-keyword
              :remote-method="remoteMethod"
              :loading="loading"
            >
              <el-option
                v-for="item in assetList"
                :key="'asset' + item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="漏洞简介:">
            <el-input v-model="editForm.introduce" type="textarea" rows="12" />
          </el-form-item>
        </el-col>
        <el-col :span="14">
          <el-form-item label="漏洞信息:">
            <div id="vulnInfo" />
          </el-form-item>
          <el-form-item label="修复方法:">
            <div id="vulnFix" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { vulnType, vulnLevel, vulnAsset, createVuln } from '@/api/vuln'
import editorConfig from './editorConfig'
import vulnFormRules from './vulnFormRules'
import WangEditor from 'wangeditor'
export default {
  name: 'VulnForm',
  props: {
    data: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      typeList: [],
      levelList: [],
      assetList: [],
      loading: false,
      infoEditor: null,
      fixEditor: null,
      vulnFormRules: vulnFormRules
    }
  },
  computed: {
    editForm() {
      return this.data
    }
  },
  mounted() {
    this.initSelectValue()
    this._getAssetList()
    this.createInfoEditor()
    this.createFixEditor()
  },
  methods: {
    /* 初始化 */
    async initSelectValue() {
      const tResp = await vulnType()
      this.typeList = tResp.data.data
      const lResp = await vulnLevel()
      this.levelList = lResp.data.data
    },
    /* 资产绑定远程搜索 */
    async remoteMethod(query) {
      if (query !== '') {
        this.loading = true
        await this._getAssetList(query)
        this.loading = false
      } else {
        await this._getAssetList()
      }
    },
    /* 创建漏洞信息编辑器 */
    createInfoEditor() {
      const vulnInfoEditor = new WangEditor('#vulnInfo')
      vulnInfoEditor.config.height = 200
      vulnInfoEditor.config.uploadImgShowBase64 = true
      vulnInfoEditor.config.menus = editorConfig.menu
      // 配置 onchange 回调函数，将数据同步到 vue 中
      vulnInfoEditor.config.onchange = (newHtml) => {
        this.infoEditor = newHtml
      }
      // 创建编辑器
      vulnInfoEditor.create()
      this.infoEditor = vulnInfoEditor
    },
    /* 创建漏洞修复编辑器 */
    createFixEditor() {
      const vulnFixEditor = new WangEditor('#vulnFix')
      vulnFixEditor.config.height = 200
      vulnFixEditor.config.uploadImgShowBase64 = true
      vulnFixEditor.config.menus = editorConfig.menu
      // 配置 onchange 回调函数，将数据同步到 vue 中
      vulnFixEditor.config.onchange = (newHtml) => {
        this.fixEditor = newHtml
      }
      // 创建编辑器
      vulnFixEditor.create()
      this.fixEditor = vulnFixEditor
    },
    /* 获得漏洞资产选项 */
    async _getAssetList(key) {
      const aResp = await vulnAsset(key)
      this.assetList = aResp.data.data
    },
    /* 清空表单 */
    cleanForm() {
      this.editForm = {}
    },
    /* 保存表单 */
    save() {
      this.$refs['vulnForm'].validate((valid) => {
        if (valid) {
          this.changeBtnLoding(true)
          if (this.editForm.id) {
            console.log(123)
          } else {
            this.editForm.info = this.infoEditor
            this.editForm.fix = this.fixEditor
            const postData = this.editForm
            postData.asset_get = this.editForm.asset_get.toString()
            createVuln(postData).then(res => {
              this.changeBtnLoding(false)
              if (res.data.code === 0) {
                this.$message.success('保存成功')
                this.postSucceed()
              }
            })
          }
        } else {
          return false
        }
      })
    },
    /* 修改对话框按钮状态 */
    changeBtnLoding(status) {
      this.$emit('changeLoading', status)
    },
    /* 提交成功 */
    postSucceed() {
      this.$emit('postSucceed', true)
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
